/**
 * 用于将path解析为面包屑
 */

import React from 'react';
import { Breadcrumb, Balloon } from '@teamix/ui';
import PropTypes from 'prop-types';
import { navigate } from 'utils/router';
import utils from 'utils';
import './index.scss';

const { pathResource, resourceSubject } = window.FORCE;

export default class PathBreadcrumb extends React.Component {
  static propTypes = {
    resourcePath: PropTypes.string,
    updateSetSelectedType: PropTypes.func,
    getExpandedTreeData: PropTypes.object,
    isHeader: PropTypes.bool,
  };

  static defaultProps = {
    resourcePath: '',
    updateSetSelectedType: () => {},
    getExpandedTreeData: () => {},
    isHeader: false,
  };

  getBreadList = () => {
    const { resourcePath } = this.props;
    const { fullPath } = pathResource;
    const projectName = fullPath.split('/').pop();
    const list = [
      {
        name: projectName,
        path: `/${fullPath}`,
      },
    ];
    // 根路径显示表格时
    const pathArr = resourcePath === '/' || !resourcePath ? [] : resourcePath.split('/');
    let sumPath = '';
    pathArr.forEach((item) => {
      sumPath += `/${item}`;
      list.push({
        path: `/${pathResource.fullPath}/tree/${utils.revisionEncodeURI(
          resourceSubject.revision,
        )}/${sumPath}`,
        name: item,
        resourcePath: sumPath,
      });
    });

    return list;
  };

  handleClick = (path) => {
    const resourcePath = path ? path.slice(1) : '';

    this.props.updateSetSelectedType &&
      this.props.updateSetSelectedType({
        resourceSubject: {
          subject: 'tree',
          path: resourcePath,
        },
      });

    navigate(
      `/${pathResource.fullPath}/tree/${utils.revisionEncodeURI(
        resourceSubject.revision,
      )}/${resourcePath}`,
    );
    this.props.getExpandedTreeData(resourcePath);
  };

  render() {
    const { isHeader } = this.props;
    const breadList = this.getBreadList();
    const lastBreadItem = breadList[breadList.length - 1];
    const isOnlyHeader = isHeader && breadList.length === 1; // 只有一级，即只有库名
    return (
      <div
        className={`${isHeader ? 'path-breadcrumb-is-header' : null} ${
          isOnlyHeader ? 'path-breadcrumb-is-header-only' : null
        }`}
      >
        {isOnlyHeader ? null : (
          <Breadcrumb className="code-breadcrumb" separator={'/'} maxNode="auto">
            {breadList.map((item, index) => {
              if (index === breadList.length - 1) {
                if (isHeader) {
                  return <Breadcrumb.Item key={item.path}>{null}</Breadcrumb.Item>;
                } else {
                  return <Breadcrumb.Item key={item.path}>{item.name}</Breadcrumb.Item>;
                }
              }
              return (
                <Breadcrumb.Item
                  onClick={(e) => {
                    // 点 ... 时不跳转
                    const isClickShowMore =
                      e.currentTarget.getAttribute('class').indexOf('breadcrumb-show-more') !== -1;
                    if (isClickShowMore) {
                      return;
                    }

                    this.handleClick(item.resourcePath);
                  }}
                  key={item.path}
                  className="breadcrumb-not-last"
                  style={{ cursor: 'pointer' }}
                >
                  {item.name}
                </Breadcrumb.Item>
              );
            })}
          </Breadcrumb>
        )}
        {isHeader ? (
          <Balloon.Tooltip
            trigger={<div className="overview-info-title">{lastBreadItem.name}</div>}
            align="t"
          >
            {lastBreadItem.name}
          </Balloon.Tooltip>
        ) : null}
      </div>
    );
  }
}
